<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>vue1</title>
        <script src="../js/vue.js"></script>
        <script src="../js/vue-router.js"></script>
    </head>
    <body>
        <div id="app">
            <a href="#/one">切换到第一个界面</a>
            <a href="#/two">切换到第二个界面</a>
            <router-view></router-view>
        </div>
        <template id="one">
            <div class="onepage">
                <p>我是第一个页面</p>
            </div>
        </template>
        <template id="two">
            <div class="twopage">
                <p>我是第二个页面</p>
            </div>
        </template>
        <script>
            // 定义组件
            const one = {
                template:"#one"
            }
            const two = {
                template:"#two"
            }
            // 定义切换规则
            const routes = [
             { path: '/one', component: one },
             { path: '/two', component: two}   
            ];
            // 根据自定义的规则，创建路由对象
            const router = new VueRouter({
                routes: routes
            })

            let vue = new Vue({
        // 告诉vue的实例对象，将来需要控制界面上的那个区域
                el:'#app',
                // 将创建好的路由对象绑定到Vue实例上
                router: router,
                data:{
                    name:"内容1"
                },
                comments:{
                    one: one,
                    two: two
                }
            });
        </script>
    </body>
</html>